<template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{$t('Print_order')}}</span>
          <el-button style="float: right;" v-print="'#printOrder'">{{$t('Print')}}</el-button>
        </div>
        <div id="printOrder">
        <div class="text-center">
          <h1>{{$t('Order_info')}}</h1>
        </div>
        <div>
          <el-row style="margin-top: 10px;">
            <el-col :span="24">
              {{$t('Order_ID')}}：{{orderDetail.order.orderSn}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              {{$t('Submission_time')}}：{{orderDetail.order.addTime}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              {{$t('手机号码')}}：{{orderDetail.order.mobile}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              {{$t('Receiving_Address')}}：{{orderDetail.order.address}}
            </el-col>
          </el-row>
        </div>

        <br/>

        <table>
          <thead>
            <tr>
              <th>{{$t('Merchandise_code')}}</th>
              <th>{{$t('Merchandise_name')}}</th>
              <th>{{$t('Number')}}</th>
              <th>{{$t('Price')}}</th>
              <th>{{$t('金额')}}</th>
              <th>{{$t('税费')}}</th>
              <th>{{$t('Subtotal_')}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="goods in orderDetail.goodsLs" :key="goods.id">
              <td>{{goods.goodsSn}}</td>
              <td>{{goods.goodsName}} / {{goods.specAndAccessory}}</td>
              <td>{{goods.number}}</td>
              <td>{{goods.sellingPrice | floorTwoDecimal}}</td>
              <td>{{goods.goodsPrice | floorTwoDecimal}}</td>
              <td>
                <div>{{goods.taxPrice | floorTwoDecimal}}</div>
                <div v-for="tax in goods.taxs" :key="tax.id">
                  {{tax.code}}({{tax.value}}%)：{{tax.price | floorTwoDecimal}}
                </div>
              </td>
              <td>
                {{goods.price | floorTwoDecimal}}
              </td>
            </tr>
          </tbody>
        </table>

      <br/>

        <div>
          <div>
            <div style="font-weight: bold;">{{$t('Notes_info')}}：</div>
            <el-row v-for="remark in orderRemarks" :key="remark.id">
              <el-col :span="24">
                <div>{{remark.remark}}</div>
              </el-col>
            </el-row>
          </div>
          <div>
            <el-form :inline="true"  label-position="left" style="text-align: right;">
                <el-form-item :label="$t('Merchandise_total_cost')">
                  <el-tag>{{orderDetail.order.goodsPrice | floorTwoDecimal}}</el-tag>
                </el-form-item>
                <el-form-item :label="$t('税费')">
                  <el-tag>{{orderDetail.order.taxPrice | floorTwoDecimal}}</el-tag>
                </el-form-item>
                <el-form-item :label="$t('Delivery_fee')">
                  <el-tag>{{orderDetail.order.freightPrice | floorTwoDecimal}}</el-tag>
                </el-form-item>
                <el-form-item :label="$t('Order_total')">
                  <el-tag>{{orderDetail.order.orderPrice | floorTwoDecimal}}</el-tag>
                </el-form-item>
                <el-form-item :label="$t('Payment_method')">
                  <el-tag>{{payTypeMap[orderDetail.order.payType]}}</el-tag>
                </el-form-item>
            </el-form>
          </div>
        </div>
        </div>
      </el-card>
    </div>
</template>

<script>

  import { detailOrder, orderGetRemarks } from '@/api/order'
  export default {
    name: "orderPrint",
    data(){
      const payTypeMap = {
        1: this.$t('现金支付'),
        2: this.$t('礼物卡支付'),
        3: this.$t('PayPal支付'),
        4: this.$t('余额支付'),
        5: this.$t('Clover支付')
      }
      return {
        payTypeMap,
        orderDetail: {
          order: {},
          user: {},
          orderGoods: []
        },
        orderRemarks: []
/*        printObject: {
          id: "printOrder",
          popTitle: 'good print',
          extraCss: 'https://www.google.com,https://www.google.com',
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
        }*/
      }
    },
    created() {
      this.getDetail()
    },
    methods: {
      getDetail() {
        const id = this.$route.query.id
        detailOrder(id).then(response => {
          this.orderDetail = response.data.data
        })
        this.getRemarks();
      },
      getRemarks() {
        const id = this.$route.query.id
        orderGetRemarks(id).then(response => {
          this.orderRemarks = response.data.data.list
        })
      },
      print(){
        window.print()
      }
    },
    computed:{
      goodsPrice(row){
        return row.price * row.number;
      },
    },
    filters:{
      goodsPriceFilter(row){
        return row.price * row.number;
      }
    }
  }
</script>

<style scoped>
  table {
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: #f0f2f5;
    border-collapse: collapse;
    color: #454545;
    table-layout: auto;
    width: 100%;
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dadcde;
  }

  thead {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #dadcde;
    line-height: 40px;
    font-weight: bold;
    color: #454c70;
  }

  tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #dadcde;
    line-height: 23px;
  }

  td {
    padding: 5px 10px;
    font-size: 14px;
    font-family: Verdana;
    width: 100px;
    word-break: break-all;
  }

  tr:nth-child(even) {
    background: #F5F7F9;
  }

  tr:nth-child(odd) {
    background: #FFF;
  }

</style>
<style media="printOrder">
  @page {
    margin: 1mm; /* this affects the margin in the printer settings */
  }
</style>
